<template>
<div>
  <!-- 上传excel的对话框 -->
  <el-dialog title="上传客户信息Excel" :visible.sync="dialogExcelVisible" width="40%">
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8088/table/excel"
      accept=".xlsx,.xls"
      :on-success="uploadExcelSuccess"
      :on-error="uploadExcelError"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传.xlsx,.xls文件，且不超过500kb</div>
    </el-upload>
  </el-dialog>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
      <h1 align="center" style="color: blue" >供应商管理</h1>
      <el-form :inline="true" :model="keyword" class="demo-form-inline" ref="searchForm">
        <el-form-item label="供应商名称" prop="supGys">
          <el-input size="small" clearable v-model="keyword.supGys" placeholder="客户编号"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="supName">
          <el-input size="small" clearable v-model="keyword.supName" placeholder="客户名称"></el-input>
        </el-form-item>
        <el-button type="primary" size="small"  @click="search" icon="el-icon-search">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="resetsearchForm('searchForm')">重置</el-button>
        <el-button type="success" size="small"  @click="daochu" icon="el-icon-upload2">导出</el-button>
        <el-button type="success" size="small"  @click="dialogExcelVisible=true" icon="el-icon-download">导人</el-button>
        <span style="margin-left: 400px">
              <el-button type="primary" @click="openAddDialog" icon="el-icon-plus" >添加</el-button>
              <el-button type="danger" @click="deletebatches" >批量删除</el-button  >
                </span>
      </el-form>
      <el-table v-loading="loading" :data="supplierList" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="供应商编号" align="center" prop="supId" />
        <el-table-column label="供应商名称" align="center" prop="supGys" />
        <el-table-column label="联系人" align="center" prop="supName"/>
        <el-table-column label="联系电话" align="center" prop="supPhone" />
        <el-table-column label="联系地址" align="center" prop="supHome" />
        <el-table-column label="供应商品" align="center" prop="supProduct" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)">更新</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="添加供应商" name="second">
      <h1 align="center" style="color:firebrick">添加供应商</h1>
      <el-form  :model="supplier" label-width="150px"  :rules="supplierRules" ref="itemTypeRulesForm">
        <el-form-item label="供应商名称：" prop="supName">
          <el-input v-model="supplier.supGys" style="width: 500px" placeholder="供应商名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="supName">
          <el-input v-model="supplier.supName" style="width: 500px" placeholder="联系人"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="supPhone">
          <el-input v-model="supplier.supPhone" style="width: 500px" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-select v-model="a" placeholder="请选择所属区域">
            <el-option label="河南省" value="河南省"></el-option>
            <el-option label="广东省" value="广东省"></el-option>
          </el-select>
          <el-select v-model="b" placeholder="请选择所属区域">
            <el-option label="郑州" value="郑州"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
          </el-select>
          <el-select v-model="c" placeholder="请选择所属区域">
            <el-option label="金水区" value="金水区"></el-option>
            <el-option label="龙岗区" value="龙港区"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input v-model="supplier.supHome"  placeholder="详细地址"></el-input>
        </el-form-item>
        <el-form-item label="主采购类目">
          <el-radio-group v-model="supplier.supProduct">
            <el-radio label="海鲜水产"></el-radio>
            <el-radio label="肉类"></el-radio>
            <el-radio label="米面粮油"></el-radio>
            <el-radio label="时令水果"></el-radio>
            <el-radio label="豆制品"></el-radio>
            <el-radio label="新鲜蔬菜"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('itemTypeRulesForm')">立即添加</el-button>
          <el-button type="primary" @click="onlot1">取消</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="更新供应商" name="third" :disabled="xianshi">
      <h1 align="center" style="color:firebrick">更新供应商</h1>
      <el-form  :model="supplier" label-width="150px"  :rules="supplierRules" ref="itemTypeRulesForm">
        <el-form-item label="供应商名称：" prop="supName">
          <el-input v-model="supplier.supGys" style="width: 500px" placeholder="供应商名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="supName">
          <el-input v-model="supplier.supName" style="width: 500px" placeholder="联系人"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="supPhone">
          <el-input v-model="supplier.supPhone" style="width: 500px" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-select v-model="a" placeholder="请选择所属区域">
            <el-option label="河南省" value="河南省"></el-option>
            <el-option label="广东省" value="广东省"></el-option>
          </el-select>
          <el-select v-model="b" placeholder="请选择所属区域">
            <el-option label="郑州" value="郑州"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
          </el-select>
          <el-select v-model="c" placeholder="请选择所属区域">
            <el-option label="金水区" value="金水区"></el-option>
            <el-option label="龙岗区" value="龙港区"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input v-model="supplier.supHome"  placeholder="详细地址"></el-input>
        </el-form-item>
        <el-form-item label="主采购类目">
          <el-radio-group v-model="supplier.supProduct">
            <el-radio label="海鲜水产"></el-radio>
            <el-radio label="肉类"></el-radio>
            <el-radio label="米面粮油"></el-radio>
            <el-radio label="时令水果"></el-radio>
            <el-radio label="豆制品"></el-radio>
            <el-radio label="新鲜蔬菜"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit1('itemTypeRulesForm')">立即更新</el-button>
          <el-button type="primary" @click="onlot1">取消</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
import {getList,del,delBatch,add1,up2} from '@/api/table'
export default {
  data(){
    return{
      dialogExcelVisible:false,
      xianshi:true,
      activeName: 'first',
      loading:true,
      supplierList:[],
      pageNum:1,
      pageSize:5,
      currentPage:1,
      total:0,
      keyword: {
        supGys: null,
        supName: null,
      },
      supId:null,
      ids:[],
      supplier:{
        supGys:null,
        supName:null,
        supPhone:null,
        supHome:null,
        supProduct:null,
      },
      a:'',
      b:'',
      c:'',
      supplierRules: {
        supGys: [
          { required: true, message: '供应商名称不能为空', trigger: 'blur' },
        ],
        supName: [
          { required: true, message: '联系人不能为空', trigger: 'blur' },
        ],
        supPhone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
        ],
      }
    }
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }else if (rowIndex === 5){
        return 'warning-row';
      }else if (rowIndex === 7){
        return 'success-row';
      }
      return '';
    },
    fetchData(){
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        supGys: this.keyword.supGys,
        supName: this.keyword.supName
      }
      getList(params).then(res=>{
         let pageInfo = res.data;
        this.loading = false;
        this.supplierList = res.data;
        this.supplierList = pageInfo.list;
        this.total = pageInfo.total
      })
    },
    //导入文件成功提醒
    uploadExcelSuccess(){
      this.$message({
        type:"success",
        message:"上传成功"
      })
      this.dialogExcelVisible = false;
      this.fetchData();
    },
    //导入文件失败提醒
    uploadExcelError(){
      this.$message({
        type:"error",
        message:"上传失败"
      })
    },
    //导出按钮
    daochu(){
      this.$confirm('确定导出数据吗？','信息',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        window.location.href="http://localhost:8088/table/excel"
      }).catch(()=>{
        this.$message({
          type:'info',
          message:'已取消导出数据'
        })
      })
    },
    //多选框
    handleSelectionChange(selectionRowArr){
      this.ids=[];
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].supId)
      }
    },
    //分页
    handleSizeChange(val){
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.fetchData()
    },
    //分页
    handleCurrentChange(val){
      this.pageNum = val;
      console.log(`当前页: ${val}`);
      this.fetchData()
    },
    //重置按钮
    resetsearchForm(formName){
      this.$refs[formName].resetFields();
      this.fetchData()
    },
    //更新按钮
    handleEdit(row){
      this.activeName='third'
      this.supplier=row
    },
    //更新提交按钮
    onSubmit1(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.supplier.supHome = this.a + this.b + this.c+this.supplier.supHome
          up2(this.supplier).then((res) => {
            this.$message({
              type: 'success',
              message: '更新成功',
              duration: 1000,
            });
            this.fetchData()
            this.supplier = {}
            this.a = null
            this.b = null
            this.c = null
            this.activeName = 'first'
          })
        }else{
          this.$message({
            type: 'error',
            message: '更新失败',
            duration: 1000, })
        }
      })
    },
    //添加确定按钮
    onSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.supplier.supHome = this.a + this.b + this.c+this.supplier.supHome
          add1(this.supplier).then((res) => {
            this.$message({
              type: 'success',
              message: '添加成功',
              duration: 1000,
            });
            this.fetchData()
            this.supplier = {}
            this.a = null
            this.b = null
            this.c = null
            this.activeName = 'first'
          })
        }else{
          this.$message({
            type: 'error',
            message: '添加失败',
            duration: 1000,
          })
        }
      })
    },

    //添加取消按钮
    onlot1(){
      this.supplier = {}
      this.activeName='first'
    },
   //单个删除按钮
    handleDelete(row){
      this.$confirm('此操作将永久删除编号为['+row.supId+']的数据?', { //this.idList这是前端多选框中选的数据
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let params={
          supId:row.supId
        }
        del(params
        ).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration:1000
          });
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration:1000
        });
      });
    },
    //添加按钮
    openAddDialog(){
    this.activeName='second'
    },
    //批量删除按钮
    deletebatches(row){
      this.$confirm('此操作将永久删除编号为['+this.ids+']的数据?', { //this.idList这是前端多选框中选的数据
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let idStr = this.ids.join(",")
        let params={
          ids:idStr
        }
        delBatch(params
        ).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration:1000
          });
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration:1000
        });
      });

    },
    //查询按钮
    search(){
      this.fetchData()
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  created() {
    this.fetchData()
  },
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
